<script setup lang="ts">
import { getSwipeFn } from '@/api/home';
import { onMounted, ref, type Ref } from 'vue';


interface iImg {
    img: string
}


const image: Ref<Array<iImg>> = ref([])

onMounted(() => {
    getSwipeFn().then(res => {
        image.value = res.data.data.data
    })
})

</script>

<template>
    <div class="content-swipe">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in image" :key="item.img">
                <van-image :src="item.img" />
            </van-swipe-item>
        </van-swipe>
    </div>

    <div class="content-position">
        <div class="position">
            <span><span><svg t="1731287847185" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="3254" width="16" height="16">
                        <path d="M512 427.023m-90 0a90 90 0 1 0 180 0 90 90 0 1 0-180 0Z" fill="#1296db" p-id="3255">
                        </path>
                        <path
                            d="M512 910.402c-19.14 0-37.482-5.854-53.042-16.929-14.063-10.01-24.926-23.596-31.589-39.46L255.043 585.177l-0.154-0.25C225.522 537.209 210 482.605 210 427.021c0-80.667 31.414-156.506 88.454-213.546S431.333 125.021 512 125.021s156.506 31.414 213.546 88.454C782.587 270.515 814 346.354 814 427.021c0 55.849-15.655 110.671-45.274 158.539l-0.264 0.419-172.081 268.716c-6.755 15.726-17.66 29.176-31.704 39.055-15.485 10.895-33.7 16.652-52.677 16.652zM309.246 551.141l175.494 273.78 1.194 3.197c4.149 11.107 14.381 18.284 26.066 18.284 11.584 0 21.791-7.071 26.004-18.015l1.165-3.028L714.43 551.678C737.701 513.983 750 470.884 750 427.021c0-63.572-24.756-123.339-69.709-168.292-44.952-44.951-104.719-69.708-168.291-69.708s-123.339 24.756-168.292 69.708S274 363.449 274 427.021c0 43.64 12.186 86.552 35.246 124.12z"
                            fill="#1296db" p-id="3256"></path>
                    </svg></span>
                <span style="color: #333; position: relative;bottom: 2px;">带你玩遍</span>

                <a href="#" style="color: #1296db;position: relative;bottom: 3px; left: 5px;">北京市</a>
                <span><svg t="1731287915528" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="5215" width="16" height="16">
                        <path d="M682.7 512l-256 256V256z" p-id="5216"></path>
                    </svg>
                </span>
            </span>

        </div>

    </div>
</template>


<style lang="scss" scoped>
.content-swipe {

    .van-swipe {
        margin: 10px 10px;
    }
}

.content-position {
    height: 16px;
    line-height: 16px;

    .position {
        margin-left: 10px;
    }
}
</style>